<template>
	<view class="app app-bg">
		<text class="title">很抱歉对您造成不便，请填写投诉的师傅信息和投诉原因。</text>
		<view class="area">
			<u-input
				placeholder="请填写投诉内容"
				v-model="content"
				type="textarea"
				:height="200"
			/>
		</view>
		<view class="area">
			<u-input
				placeholder="留下您的联系方式 手机 / QQ邮箱"
				v-model="mobile"
				type="text"
			/>
		</view>
		<view class="tips">您的联系方式有助于我们沟通解决问题，仅工作人员可见</view>
		<view class="btn" @tap="confirm">提交</view>
	</view>
</template>

<script>
var vk = uni.vk

export default {
	data() {
		return {
			id: "",
			content: "",
			mobile: ""
		}
	},
	onLoad(opt) {
		this.id = opt.id
	},
	methods: {
		confirm() {
			const { content, mobile } = this
			if (!content) {
				return vk.toast("请填写投诉内容")
			}
			if (!mobile) {
				return vk.toast("请填写联系方式")
			}
			vk.callFunction({
				url: "client/user.sendFeedback",
				title: "提交中...",
				data: {
					content,
					mobile,
					type: 2,
					id: this.id
				}
			}).then(() => {
				vk.toast("提交成功", "none", 1000, () => {
					vk.navigateBack()
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 24rpx 20rpx;
}

.title {
	padding: 0 6rpx;
}

.area {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 12rpx 14rpx;
	margin: 26rpx 0 40rpx;
	font-size: 24rpx !important;
}

.tips {
	color: #cccccc;
	padding: 0 10rpx;
	margin-top: -16rpx;
}

.btn {
	background-color: #3ab54a;
	color: #fff;
	border-radius: 44rpx;
	padding: 24rpx 20rpx;
	margin: 160rpx 0 30rpx;
	text-align: center;
	font-size: 28rpx;
}
</style>
